<script lang="ts">
import {jStorage} from 'jzutil';
import {defineComponent, ref, Ref} from 'vue';
import {ElMessage} from 'element-plus';

export default defineComponent({
    setup() {
        const treeData = ref([]);
        const crtGroup = ref({
            groupName: ''
        });
        const elTree = ref(null);
        const showGroupModal = ref(false);
        const handelAddGroup = () => {
            showGroupModal.value = true;
        };
        const treeProps = ref({
            label: 'groupName'
        });
        const groupFormData = ref<{
            groupName: string;
            parent: string;
            children: any[];
        }>({
            groupName: '',
            parent: '',
            children: []
        });
        const handelSubmitGroup = () => {
            const foo = (data: any[], value: string) => {
                data.map((item) => {
                    if (item.groupName === value) {
                        item.children.push(groupFormData.value);
                    } else {
                        foo(item.children, value);
                    }
                });
            };
            const {parent} = groupFormData.value;

            const tree = jStorage.getLocal('groupTree') || [];
            if (!parent) {
                tree.push(groupFormData.value);
            } else {
                //
                foo(tree, parent);
            }

            ElMessage.success({
                message: '保存成功',
                type: 'success',
                duration: 1000
            });
            jStorage.setLocal('groupTree', tree);
            showGroupModal.value = false;
            groupFormData.value = {
                groupName: '',
                parent: '',
                children: []
            };
            //@ts-ignore
            elTree.value?.setCheckedKeys([]);
            treeData.value = tree;
        };
        const images = ref<any[]>([]);
        const checkedKeys = ref<any>();
        const checkParentNode = (d1: any, d2: any) => {
            console.log(d1, d2);
        };
        const checkChange = (e: any, v: any) => {
            // console.log(e);
            if (!v) {
                //@ts-ignore
                // elTree.value?.setCheckedKeys([]);
                groupFormData.value.parent = '';
            } else {
                groupFormData.value.parent = e.groupName;
                //@ts-ignore
                elTree.value?.setCheckedKeys([e.groupName]);
            }
        };
        const handelCancelModal = () => {
            //@ts-ignore
            elTree.value?.setCheckedKeys([]);
            showGroupModal.value = false;
        };
        const clickGroupNode = (data: any) => {
            crtGroup.value = data;
            const tempImages = jStorage.getLocal('images') || [];
            images.value = tempImages.filter((item: any) => item.type === data.groupName);
        };
        const onUploadChange = (file: any, fileList: any) => {};
        const beforeUpload = (file: any) => {
            return true;
        };
        const onUploadSuccess = (res: any, file: any, fileList: any) => {
            const temp = jStorage.getLocal('images') || [];
            temp.push({
                src: file.url,
                name: file.name,
                type: crtGroup.value.groupName
            });
            images.value = temp;
            jStorage.setLocal('images', temp);
        };
        //init
        (() => {
            treeData.value = jStorage.getLocal('groupTree') || [];
            images.value = jStorage.getLocal('images') || [];
        })();
        return {
            jStorage,
            images,
            ref,
            ElMessage,
            treeData,
            elTree,
            showGroupModal,
            handelAddGroup,
            treeProps,
            groupFormData,
            handelSubmitGroup,
            onUploadSuccess,
            checkedKeys,
            checkParentNode,
            clickGroupNode,
            crtGroup,
            checkChange,
            onUploadChange,
            beforeUpload,
            handelCancelModal
        };
    }
});
</script>
<template>
    <el-container class="picture-page">
        <el-aside width="280px">
            <div class="aside-header">
                <el-button @click="handelAddGroup">新增分组</el-button>
            </div>
            <div class="aside-tree">
                <el-tree
                    :data="treeData"
                    :props="treeProps"
                    :expand-on-click-node="false"
                    highlight-current
                    @node-click="clickGroupNode"
                ></el-tree>
            </div>
        </el-aside>
        <el-main>
            <div class="view-header">
                <span>{{ crtGroup.groupName }}</span>
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-success="onUploadSuccess"
                    :on-change="onUploadChange"
                    accept=".jpg,.png,.jpeg,.webp"
                    :before-upload="beforeUpload"
                    :show-file-list="false"
                    list-type="picture"
                    multiple
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </div>
            <div class="view-body">
                <div v-for="(item, index) in images" :key="index.toString()" class="image-item">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="'https://child-1258734295.cos.ap-chengdu.myqcloud.com/tempimage/' + item.name"
                        lazy
                    ></el-image>
                </div>
            </div>
        </el-main>
        <el-dialog title="新增分组" v-model="showGroupModal" width="30%">
            <el-form label-position="left" label-width="100px" :model="groupFormData">
                <el-form-item label="上级分组:">
                    <el-tree
                        :data="treeData"
                        :props="treeProps"
                        node-key="groupName"
                        ref="elTree"
                        show-checkbox
                        :check-strictly="true"
                        :accordion="true"
                        :current-node-key="checkedKeys"
                        @check-change="checkChange"
                    ></el-tree>
                </el-form-item>
                <el-form-item label="分组名称:">
                    <el-input v-model="groupFormData.groupName" placeholder="请输入分组名称" maxlength="10"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handelCancelModal">取 消</el-button>
                    <el-button type="primary" @click="handelSubmitGroup">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>
<style scoped lang="less">
.picture-page {
    width: 100%;
    height: 100%;
}
.el-aside {
    height: 100%;
    // background-color: #f1f1f1;
    // border-right: 1px solid #f1f1f1;
    padding-right: 20px;
}
.el-main {
    width: calc(100% - 280px);
    height: 100%;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    padding: 0;
    border-radius: 4px;
}
.aside-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    margin-bottom: 10px;
}
.aside-tree {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}
.view-header {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 10px -10px #e0e0e0;
    padding: 10px 20px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #e1e1e1;
}
.view-body {
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    // display: flex;
    // flex-direction: row;
    // flex-wrap: wrap;
}
.image-item {
    margin: 10px;
    max-height: 100px;
    display: inline-block;
}
</style>
